/* 小于1100像素时 */
@media (max-width: 1100px) {
  /* 隐藏导航栏 */
  header nav{
    display: none;
  }

  header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* 折叠按钮样式 */
  header .collapse {
    display: block;
    justify-self: end;
    position: relative;
    cursor: pointer;
    width: 20px;
    height: 6px;
  }
  
  .collapse_line,
  .collapse_line2,
  .collapse_line3 {
    width: 20px;
    height: 2px;
    background-color: var(--text-color-lightest);
  }
  /* 上移第一条线 */
  .collapse_line {
    position: absolute;
    top: -6px;
  }
  /* 下移第三条线 */
  .collapse_line3 {
    position: absolute;
    top: 6px;
  }

  /* 点击按钮展开 logo的样式 */
  header.open .logo {
    color: var(--text-color-darker);
    z-index: 40;
  }

  /* 点击按钮展开 导航栏的样式 */
  header.open nav {
    display: grid;
    /* 每行高度为内容的高度，不设置会平分全屏高度 */
    grid-auto-rows: max-content;
    justify-items: end;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 40px;

    /* 默认不显示，使用动画下滑显示 */
    opacity: 0;
    animation: slideDown .6s ease-out forwards;
  }
  header.open nav > * {
    margin: 4px 0;
    font-size: 18px;
    color: var(--text-color-darker);

    /* 默认不显示，使用动画过度显示 */
    opacity: 0;
    animation: showMenu .5s linear forwards .4s;
  }
  header.open nav > i.fas {
    margin-top: 10px;
  }

  /* 点击按钮展开/下滑固定导航时 按钮的样式：颜色、变成关闭状态 */
  header.open .collapse_line,
  header.open .collapse_line2,
  header.open .collapse_line3, 
  header.sticky .collapse_line,
  header.sticky .collapse_line2,
  header.sticky .collapse_line3 {
    background-color: var(--text-color-darker);
    transition: .4s ease;
  }
  /* 全屏导航显示时，折叠按钮第一条线样式 */
  header.open .collapse_line {
    transform: rotate(45deg) translate(3px, 5px);
  }
  /* 全屏导航显示时，折叠按钮第二条线样式 隐藏*/
  header.open .collapse_line2 {
    transform: translate(5px);
    opacity: 0;
  }
  /* 全屏导航显示时，折叠按钮第一条线样式 */
  header.open .collapse_line3 {
    transform: rotate(-45deg) translate(3px, -5px);
  }

  /* 导航下滑动画 */
  @keyframes slideDown {
    from {
      height: 0;
      opacity: 0;
    }
    to {
      height: 100vh;
      padding-top: 80px;
      opacity: 1;
    }
  }

  /* 菜单项动画 */
  @keyframes showMenu {
    from {
      opacity: 0;
      transform: translateY(-1vh);
    }
    to {
      opacity: 1;
    }
  }

  /* 缩小服务流程标题字体 */
  .service_item .service_title {
    font-size: 20px;
  }
  /* 缩小服务流程内容字体和行距 */
  .service_item .service_content {
    font-size: 14px;
    line-height: 24px;
  }

  /* 团队成员改为两列 */
  .team_intro .team_members {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 6vw;
    row-gap: 36px;
  }

  /* 公司动态改为两列 */
  .company_activities .activities {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 36px;
  }
}

/* 小于992像素时 */
@media (max-width: 992px) {
  /* 轮播上的标题字号缩小 */
  .glide__slide .slide_caption h1 {
    font-size: 48px;
  }
  .glide__slide .slide_caption h3 {
    font-size: 20px;
  }

  /* 关于我们和服务流程设置为两列布局 */
  .features,
  .service .services {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: unset;
  }

  /* 成功案列设置为三列 */
  .cases .case_item {
    width: calc(100vw / 3);
  }

  /* 数据模块两列 */
  .data_section {
    grid-template-columns: repeat(2, minmax(auto, 200px));
    row-gap: 24px;
    height: auto;
    padding: 24px 0;
  }
}

/* 小于768像素时 */
@media (max-width: 768px) {
  .glide__slide .slide_caption h1 {
    font-size: 42px;
  }
  .glide__slide .slide_caption h3 {
    font-size: 16px;
  }
  .glide__slide .slide_caption.left,
  .glide__slide .slide_caption {
    max-width: 50vw;
  }

  section,
  footer .footer_menus {
    padding: 0 40px;
  }

  /* 关于我们和服务流程设置为1列布局 */
  .features,
  .service .services {
    grid-template-columns: 1fr;
    grid-template-rows: unset;
  }

  /* 成功案列设置为2列 */
  .cases .case_item {
    width: calc(100vw / 2);
    height: 30vw;
  }

  /* 公司动态 */
  .company_activities .activities {
    grid-template-columns: 1fr;
  }

  /* 底部菜单设置为3列 */
  footer .footer_menus {
    grid-template-columns: 2fr repeat(2, 1fr);
    row-gap: 24px;
  }
  /* 联系我们占前两行*/
  .footer_menus .cantact_us {
    grid-row: 1 / 3;
  }
  .footer_menu {
    text-align: right;
  }
}

/* 小于576象素 */
@media (max-width: 576px) {
  .glide__slide .slide_caption h1 {
    font-size: 28px;
  }
  .glide__slide .slide_caption h3 {
    font-size: 14px;
  }
  .glide__slide .slide_caption .explore_btn {
    font-size: 14px;
    padding: 8px 18px;
  }

  /* 成功案列设置为1列 */
  .cases .case_item {
    width: 100vw;
    height: 60vw;
  }

  /* 团队介绍设置为1列 */
  .team_intro .team_members {
    /* grid-template-columns: 1fr; */
    grid-template-columns: minmax(200px, 400px);
  }

  .data_section {
    grid-template-columns: 1fr;
  }

  footer .footer_menus {
    grid-template-columns: 1fr;
  }
  .footer_menu {
    justify-self: start;
    text-align: left;
  }
}